<template>
  <div class="wrapper flex flex-direction-column">
    <div class="flex-1">
      <div class="input">
        <div class="input-title">请填写你的信息</div>
        <div class="input-search">
          <van-cell-group class="van-cell-group cell-border">
            <van-field
              v-model="formParam.name"
              placeholder="您的姓名"
            >
            </van-field>
          </van-cell-group>
        </div>

        <div class="input-select">
          <van-radio-group
            v-model="formParam.sex"
            direction="horizontal"
          >
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </div>

        <div class="input-search">
          <van-cell-group class="van-cell-group cell-border">
            <van-field
              v-model="formParam.age"
              placeholder="您的年龄"
            >
            </van-field>
          </van-cell-group>
        </div>

        <div class="input-search">
          <van-cell-group class="van-cell-group cell-border">
            <van-field
              v-model="formParam.phone"
              placeholder="您的电话"
            >
            </van-field>
          </van-cell-group>
        </div>

        <div class="input-search">
          <van-cell-group class="van-cell-group cell-border">
            <van-field
              v-model="formParam.hobby"
              placeholder="您的兴趣爱好"
            >
            </van-field>
          </van-cell-group>
        </div>

        <div class="input-search">
          <van-cell-group class="van-cell-group cell-border">
            <van-field
              v-model="formParam.qq"
              placeholder="您的QQ"
            >
            </van-field>
          </van-cell-group>
        </div>

        <div class="match-btn">
          <van-button
            type="primary"
            size="normal"
            block
            @click="matchFn"
          >添加</van-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { Toast } from 'vant';
import xs from '@public/img/xs.gif'

import { skyAdd } from '@/assets/api/home.js'
export default {
  components: {
  },
  props: {},
  data () {
    return {
      loading: false,
      xsImg: xs,
      formParam: {
        name: '',
        sex: '1',
        age: '',
        phone: '',
        hobby: '',
        qq: ''
      }
    };
  },
  created () { },
  methods: {
    matchFn () {
      console.log(this.formParam)
      skyAdd(this.formParam).then((res) => {
        if (res.success) {
          Toast({
            message: "添加成功"
          });
          this.$router.push({ path: '/home' })
          return
        }
        Toast({
          message: res.msg
        });
      })
    }
  },
  mounted () {
  },
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.wrapper {
  // height: 100vh;
  overflow: hidden;
  img {
    width: 100%;
  }
  .input {
    .input-title {
      width: 100%;
      text-align: center;
      font-size: 18px;
      padding: 20px 0;
    }
    .input-search {
      position: relative;
      border: 1px solid #d7d7d7;
      margin: 30px 20px;
      border-radius: 10px;
      overflow: hidden;
      .search-btn {
        padding: 0 20px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: initial;
      }
    }
    .match-btn {
      margin: 30px 20px;
    }
    .input-select {
      margin: 30px 20px;
    }
  }
  .sms-send {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #d7d7d7;
    padding: 10px 20px;
    .van-search__content {
      background: #fff;
    }
  }
  .sms-btn {
    color: #34a1ed;
  }
  .list {
    overflow: auto;
  }
  .footer-pd {
    padding: 30px;
  }
}
</style>
